<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <body>
    <div class="carousel">
      <div class="carousel_control"></div>
      <div class="carousel_stage">
        <div class="spinner spinner-left">
          <div class="spinner_face js_active" data-bg="#27323c">
            <div class="content" data-type="iceland">
              <div class="content_left">
                <h1>ICEKAND <br /><span>EUROPE</span></h1>
              </div>
              <div class="content_right">
                <div class="content_main">
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Delectus necessitatibus officia nesciunt consequatur sed
                    exercitationem amet saepe rerum quaerat est, ipsa, dolor
                    accusamus ad reprehenderit unde asperiores voluptatem rem
                    quo.
                  </p>
                  <p>- Caeolyn Bain</p>
                </div>
                <h3 class="content_index">01</h3>
              </div>
            </div>
          </div>
          <div class="spinner_face" data-bg="#19304a">
            <div class="content" data-type="china">
              <div class="content_left">
                <h1>ASIA <br /><span>ASIA</span></h1>
              </div>
              <div class="content_right">
                <div class="content_main">
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Delectus necessitatibus officia nesciunt consequatur sed
                    exercitationem amet saepe rerum quaerat est, ipsa, dolor
                    accusamus ad reprehenderit unde asperiores voluptatem rem
                    quo.
                  </p>
                  <p>- Damian Harper</p>
                </div>
                <h3 class="content_index">02</h3>
              </div>
            </div>
          </div>
          <div class="spinner_face" data-bg="#2b2533">
            <div class="content" data-type="usa">
              <div class="content_left">
                <h1>USA<br /><span>NORTH</span></h1>
              </div>
              <div class="content_right">
                <div class="content_main">
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Delectus necessitatibus officia nesciunt consequatur sed
                    exercitationem amet saepe rerum quaerat est, ipsa, dolor
                    accusamus ad reprehenderit unde asperiores voluptatem rem
                    quo.
                  </p>
                  <p>- Damian Harper</p>
                </div>
                <h3 class="content_index">03</h3>
              </div>
            </div>
          </div>
          <div class="spinner_face" data-bg="#312f2d">
            <div class="content" data-type="peru">
              <div class="content_left">
                <h1>PERU<br /><span>SOUTH AMERICA</span></h1>
              </div>
              <div class="content_right">
                <div class="content_main">
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Delectus necessitatibus officia nesciunt consequatur sed
                    exercitationem amet saepe rerum quaerat est, ipsa, dolor
                    accusamus ad reprehenderit unde asperiores voluptatem rem
                    quo.
                  </p>
                  <p>- Carolyn McCarthy</p>
                </div>
                <h3 class="content_index">04</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./script.js" type="text/javascript"></script>
  </body>
</html>
